<template>
  <div class="videoClassManagement">
    <h3>视频上传分类管理</h3>
    <div class="search">
      <div class="cond1 cond">
        <el-input placeholder="请输入ID" v-model="search1">
          <template slot="prepend">ID</template>
        </el-input>
      </div>
      <div class="cond1 cond">
        <el-input placeholder="请输入类型" v-model="search2">
          <template slot="prepend">类型</template>
        </el-input>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </div>
    <div class="opration">
      <el-button type="success" icon="el-icon-plus" @click="addData">添加</el-button>
      <el-button type="danger" icon="el-icon-delete" @click="batchDelete">批量删除</el-button>
    </div>
    <div class="list">
      <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column header-align="center" align="center" type="selection" width="55"></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="ID"
          sortable
          width="90"
        ></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="分类" width="120"></el-table-column>
        <el-table-column header-align="center" align="center" label="所属类型">
          <template slot-scope="scope">
            <ul class="typeList">
              <li v-for="(item,index) in scope.row.typeList" :key="index" @click="handleKeyWordModify(item,index)">{{item}}</li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="状态" width="150">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isOpen"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeSwitch"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="success" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="100"
        layout="total, prev, pager, next, jumper"
        :total="1000"
      ></el-pagination>
    </div>
    <!-- //添加弹窗 -->
    <el-dialog title="添加" :visible.sync="addDialogVisible" width="40%" center>
      <div class="row">
        <span>分类：</span>
        <el-input placeholder="请输入" v-model="inputClass" clearable></el-input>
      </div>
      <div class="row">
        <span>排序：</span>
        <el-input-number v-model="num" :min="1" :max="100" label="描述文字"></el-input-number>
      </div>
      <div class="row">
        <span>状态：</span>
        <el-switch v-model="statusValue" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      </div>
      <div class="addTypeList">
        <div class="title">类型列表</div>
        <ul>
          <li v-for="(item,index) in newAddTypeList" :key="index">
            <div class="row">
              <span>类型：</span>
              <el-input placeholder="请输入" v-model="item.inputType" clearable></el-input>
            </div>
            <div class="row">
              <span>排序：</span>
              <el-input-number v-model="item.sortNum" :min="1" :max="100" label="描述文字"></el-input-number>
            </div>
            <div class="row">
              <span>状态：</span>
              <el-switch v-model="item.statusValue" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </div>
            <div class="row rowRemove">
              <el-button
                size="mini"
                type="warning"
                icon="el-icon-delete"
                @click="handleTypeRemove(index)"
              >移除</el-button>
            </div>
          </li>
        </ul>
        <div class="newAdd">
          <el-button
            size="mini"
            type="success"
            icon="el-icon-folder-add"
            @click="handleNewAddType"
          >新增</el-button>
        </div>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitAdd">提交</el-button>
        <el-button type="info" size="small" @click="cancelAdd">取消</el-button>
      </div>
    </el-dialog>
    <!-- //编辑弹窗 -->
    <el-dialog title="视频上传类型修改" :visible.sync="modifyDialogVisible" width="40%" center>
      <div class="row">
        <span>ID：</span>
        <el-input v-model="inputID" :disabled="true"></el-input>
      </div>
      <div class="row">
        <span>分类：</span>
        <el-input placeholder="请输入" v-model="inputClass" clearable></el-input>
      </div>
      <div class="row">
        <span>排序：</span>
        <el-input-number v-model="num" :min="1" :max="100" label="描述文字"></el-input-number>
      </div>
      <div class="row">
        <span>状态：</span>
        <el-switch v-model="statusValue" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      </div>
      <div class="addTypeList">
        <div class="title">类型列表</div>
        <ul>
          <li v-for="(item,index) in newAddTypeList" :key="index">
            <div class="row">
              <span>类型：</span>
              <el-input placeholder="请输入" v-model="item.inputType" clearable></el-input>
            </div>
            <div class="row">
              <span>排序：</span>
              <el-input-number v-model="item.sortNum" :min="1" :max="100" label="描述文字"></el-input-number>
            </div>
            <div class="row">
              <span>状态：</span>
              <el-switch v-model="item.statusValue" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </div>
            <div class="row rowRemove">
              <el-button
                size="mini"
                type="warning"
                icon="el-icon-delete"
                @click="handleTypeRemove(index)"
              >移除</el-button>
            </div>
          </li>
        </ul>
        <div class="newAdd">
          <el-button
            size="mini"
            type="success"
            icon="el-icon-folder-add"
            @click="handleNewAddType"
          >新增</el-button>
        </div>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitAdd">提交</el-button>
        <el-button type="info" size="small" @click="cancelModify">取消</el-button>
      </div>
    </el-dialog>
     <!-- //关键词修改弹窗 -->
    <el-dialog title="关键词修改" :visible.sync="kyWordModifyDialogVisible" width="40%" center class="keyWordModify">
        <div class="row">
        <span>ID：</span>
        <el-input v-model="inputUserID" :disabled="true"></el-input>
      </div>
      <div class="row">
        <span>关键词：</span>
        <el-input placeholder="请输入关键词" v-model="inputKeyWord" clearable></el-input>
      </div>
      <div class="row">
        <span>关联词id：</span>
        <el-input placeholder="请输入关联词id" v-model="inputRelatedWordsId" clearable></el-input>
      </div>
      <div class="row">
        <span>图片：</span>
        <img :src="imgUrl" alt="">
      </div>
      <div class="row">
        <span>上传图片：</span>
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :limit="1"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitKyWordModify">提交</el-button>
        <el-button type="info" size="small" @click="cancelKyWordModify">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "videoClassManagement",
  data() {
    return {
      search1: "",
      search2: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          num: 1,
          userName: "aaa",
          typeList: ["主播", "护士", "学生", "模特", "王洪", "老师", "空姐"],
          isOpen: true
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          num: 2,
          userName: "aaa",
          typeList: [
            "主播",
            "护士",
            "学生",
            "模特",
            "王洪",
            "老师",
            "空姐",
            "秘书",
            "少妇",
            "医生"
          ],
          isOpen: true
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          num: 3,
          userName: "aaa",
          typeList: [
            "主播",
            "护士",
            "学生",
            "模特",
            "王洪",
            "老师",
            "空姐",
            "秘书",
            "少妇",
            "医生"
          ],
          isOpen: true
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          num: 4,
          userName: "aaa",
          typeList: [
            "主播",
            "护士",
            "学生",
            "模特",
            "王洪",
            "老师",
            "空姐",
            "秘书",
            "少妇",
            "医生"
          ],
          isOpen: true
        }
      ],
      //多选框选中的值
      multipleSelection: [],
      currentPage1: 1,
      //添加弹窗
      addDialogVisible: false,
      //编辑弹窗
      modifyDialogVisible: false,
      //关键词修改弹窗
      kyWordModifyDialogVisible:false,
      //关键词修改图片预览
      dialogVisible:false,
      //添加弹窗输入分类
      inputClass: "",
      //添加弹窗步进器选择
      num: "",
      //添加弹窗开关状态
      statusValue: true,
      //编辑的时候用户id
      inputID: "",
      //添加弹窗新加类型列表
      newAddTypeList: [],
      //关键词修改弹窗用户id
      inputUserID:"",
      //关键词修改弹窗关键词
      inputKeyWord:"",
      //关键词修改关联词id
      inputRelatedWordsId:"",
      //关键词修改弹窗旧图片路径
      imgUrl:"",
      //关键词修改弹窗新上传图片路径
      dialogImageUrl:"",
      
    };
  },
  mounted() {},
  methods: {
    //多选框选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    //显示编辑弹窗
    handleEdit(index, row) {
      this.modifyDialogVisible = true;
    },
    //删除单行
    handleDelete(index, row) {},
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage1 = val;
    },
    //添加
    addData() {
      this.addDialogVisible = true;
      this.newAddTypeList=[];
    },
    //批量删除
    batchDelete() {},
    //提交添加内容
    submitAdd() {},
    //取消添加
    cancelAdd() {
      this.addDialogVisible = false;
    },
    //提交修改内容
    submitModify() {},
    //取消修改
    cancelModify() {
      this.modifyDialogVisible = false;
    },
    // 开关状态改变时的回调函数
    changeSwitch(val) {},
    //添加弹窗新增类型
    handleNewAddType() {
      let type = {
        inputType: "",
        sortNum: "",
        statusValue: true
      };
      this.newAddTypeList.push(type);
    },
    //添加弹窗移除类型
    handleTypeRemove(idx){
        this.newAddTypeList.forEach((item,index)=>{
            if(idx==index){
                this.newAddTypeList.splice(index,1);
            };
        });
    },
    //提交修改关键词
    submitKyWordModify(){},
    //取消提交修改关键词
    cancelKyWordModify(){
        this.kyWordModifyDialogVisible=false;
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //删除上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //显示修改关键词弹窗
    handleKeyWordModify(item,index){
        this.kyWordModifyDialogVisible=true;
    },

  }
};
</script>
<style scoped>
h3{
    padding:.2rem;
    color:#3c763d;
}
.search {
  display: flex;
  margin-top: 0.2rem;
  padding-left: 0.2rem;
  width: 100%;
  flex-wrap: wrap;
}
.el-input {
  width: 2.5rem;
}
.keyWordModify .el-input {
  width: 80%;
}
label {
  width: 0.83rem;
  height: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
}
.cond {
  display: flex;
  margin-right: 0.4rem;
  margin-bottom: 0.1rem;
}
.search .el-select >>> .el-input__inner {
  border-left: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.search .el-select {
  width: 1.67rem;
}
.opration {
  margin-top: 0.2rem;
  padding-left: 0.2rem;
}
.page {
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
}
.list {
  margin-top: 0.2rem;
  padding: 0 0.1rem;
  font-size: 0.12rem;
}
.dialogBtn {
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
.row {
  margin-bottom: 0.1rem;
  display: flex;
  align-items: center;
}
.row span {
  width: 0.6rem;
  display: block;
}
.keyWordModify .row span{
    width:1rem;
}
textarea {
  width: 2.5rem;
  height: 1rem;
  border: 1px solid #dcdfe6;
  border-radius: 3px;
  padding: 0.05rem;
}
.row >>> .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.row >>> .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.row >>> .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.row >>> .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.typeList {
  display: flex;
  flex-wrap: wrap;
}
.typeList li {
  padding: 0.01rem 0.05rem;
  background: #00c0ef;
  border: 1px solid #00acd6;
  font-size: 0.12rem;
  color: #fff;
  display: inline-block;
  border-radius: 3px;
  margin-right: 0.02rem;
  cursor: pointer;
}
.typeList li:hover {
  background: #00acd6;
}
.addTypeList {
  border-top: 1px solid #eee;
  padding-top: 0.2rem;
}
.addTypeList .title {
  font-size: 0.16rem;
  color: #00acd6;
}
.addTypeList ul li {
  margin-top: 0.2rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid #eee;
}
.rowRemove {
  display: flex;
  justify-content: flex-end;
}
.newAdd {
  margin-top: 0.1rem;
}
</style>